<!DOCTYPE>
<html>
    <body>
        <div class="center">
            <p><b>这是一个居中的标题</b></p>
            <p id="right"><b>这是一个绝对定位的标题</b></p>
        </div>
        <div class="right">
            <p>这是一个靠右的标题</p>
        </div>
        <div>
            <img id="auto" src="http://pic.uzzf.com/up/2017-2/14873018711362378.jpg" /><br />
            <img id="height-img-px" src="http://pic.uzzf.com/up/2017-2/14873018711362378.jpg" />
            <img id="height-img-5" src="http://pic.uzzf.com/up/2017-2/14873018711362378.jpg" />
            <img id="width-img-px" src="http://pic.uzzf.com/up/2017-2/14873018711362378.jpg" />
            <img id="width-img-5" src="http://pic.uzzf.com/up/2017-2/14873018711362378.jpg" />
        </div>
        <div>
            <p class="height">很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长</p>
            <img src="http://pic.uzzf.com/up/2017-2/14873018711362378.jpg" />
        </div>
        <div>
            <p class="width-font-px">很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长</p>
            <p class="width-font-5">很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长</p>
            <p class="min-height-font-px">很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长</p>
            <p class="min-width-font-px">很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长</p>
            <p class="min-width-font-5">很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长</p>
            <p>-----------------------------------------------------------------------------------------------------------------</p>
        </div>
        <div>
            <p class="line-height-px">很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长</p>
            <p class="line-height-5">很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长</p>
            <p class="line-height-num">很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长</p>
        </div>
        <div>
            <div class="img">
                <a target="_blank" href="http://pic.k73.com/up/soft/2017/0217/115751_45221623.jpg">
                    <img src="http://pic.k73.com/up/soft/2017/0217/115751_45221623.jpg" alt="Ballade" width="160" height="160" />
                </a>
                <div class="desc">描述</div>
            </div>
            <div class="img">
                <a target="_blank" href="http://pic.k73.com/up/soft/2017/0217/115751_45221623.jpg">
                    <img src="http://pic.k73.com/up/soft/2017/0217/115751_45221623.jpg" alt="Ballade" width="160" height="160" />
                </a>
                <div class="desc">描述</div>
            </div>
            <div class="img">
                <a target="_blank" href="http://pic.k73.com/up/soft/2017/0217/115751_45221623.jpg">
                    <img src="http://pic.k73.com/up/soft/2017/0217/115751_45221623.jpg" alt="Ballade" width="160" height="160" />
                </a>
                <div class="desc">描述</div>
            </div>
            <div class="img">
                <a target="_blank" href="http://pic.k73.com/up/soft/2017/0217/115751_45221623.jpg">
                    <img src="http://pic.k73.com/up/soft/2017/0217/115751_45221623.jpg" alt="Ballade" width="160" height="160" />
                </a>
                <div class="desc">描述</div>
            </div>
        </div>
        <img id="img" src="http://pic.k73.com/up/soft/2017/0217/115751_45221623.jpg" style="width: 160px;" />
        <div class="background">
            <div class="transbox">
                <p>全是字全是字全是字全是字</p>
            </div>
        </div>
    </body>
</html>
<style>
    .center{
        margin:auto;
        font-size: 20px;
        width:14%;
        background-color:#ff0;
    }
    #right{
        position:absolute;
        right:400px;
        width:220px;
        background-color:#ff0;
    }
    .right{
        float:right;
        width:300px;
        background-color:#ff0;
    }
    #auto{
        height: auto;
    }
    #height-img-px{
        height: 150px;
    }
    #height-img-5{
        height: 10%;
    }
    #width-img-px{
        width: 120px;
    }
    #width-img-5{
        width: 20%;
    }
    .height{
        max-height: 30px;
    }
    .width-font-px{
        width: 300px;
    }
    .width-font-5{
        width: 15%;
    }
    .min-height-font-px{
        min-height: 200px;
    }
    .min-width-font-px{
        min-width: 200px;
    }
    .min-width-font-5{
        min-width: 20%;
    }
    /*在大多数浏览器中默认行高大约是 110% 到 120%*/
    .line-height-px{
        line-height: 40px;
    }
    .line-height-5{
        line-height: 200%;
    }
    .line-height-num{
        line-height: 0.5;
    }
    div.img{
        margin: 3px;
        border: 1px solid #bebebe;
        height: auto;
        width: auto;
        float: left;
        text-align: center;
    }
    div.img img{
        display: inline;
        margin: 3px;
        border: 1px solid #bebebe;
    }
    div.img a:hover img{
        border: 1px solid #333333;
    }
    div.desc{
        text-align: center;
        font-weight: normal;
        width: 150px;
        font-size: 12px;
        margin: 10px 5px 10px 5px;
    }
    #img{
        opacity: 0.4;
        filter: alpha(opacity=40);
    }
    #img:hover{
        opacity: 1.0;
        filter: alpha(opacity=100);
    }
    div.background{
        width: 400px;
        height: 266px;
        margin: 15px;
        background: url('http://pic.uzzf.com/up/2017-2/14873018711362378.jpg') no-repeat;
        border: 1px solid black;
    }
    div.transbox{
        width: 338px;
        height: 204px;
        margin: 30px;
        padding: 0;
        background-color: #ffffff;
        border: 1px solid black;
        filter: alpha(opacity=60);
        opacity: 0.6;
    }
    div.transbox p{
        margin: 30px 40px;
        color: #000000;
        font:bold 12px Verdana, Geneva, sans-serif;
        line-height:1.5;
    }
    @media screen{
        p.test {font-family:verdana,sans-serif; font-size:14px}
    }

    @media print{
        p.test {font-family:times,serif; font-size:10px}
    }

    @media screen,print{
        p.test {font-weight:bold}
    }
</style>